<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  modelValue?: string
  placeholder?: string
  required?: boolean
  title?: string
  maxLength?: number
}

interface Emits {
  (e: 'update:modelValue', value: string): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  placeholder: '请输入审批意见',
  required: false,
  title: '审批意见',
  maxLength: 150,
})

const emit = defineEmits<Emits>()

const inputValue = ref(props.modelValue)

function onInput(event: any) {
  const value = event.detail.value
  inputValue.value = value
  emit('update:modelValue', value)
}
</script>

<template>
  <view class="approval-opinion mb-2 w-full border border-gray-200 bg-white p-5">
    <text class="mb-2 block text-base font-medium">
      {{ title }}
      <text v-if="required" class="text-red-500">*</text>
    </text>
    <textarea
      :value="inputValue"
      :placeholder="placeholder"
      :maxlength="maxLength"
      class="h-32 w-full resize-none border border-gray-200 rounded-2 bg-gray-100 p-4 border-box"
      placeholder-class="text-gray-400"
      @input="onInput"
    />
  </view>
</template>

<style scoped>
/* 可以根据需要添加样式 */
</style>
